@import './fonts.css';

.page-enter-active, .page-leave-active {
    transition: opacity .25s, transform .25s;
}

.page-enter, .page-leave-to  {
    opacity: 0;
    transform: scale(1.01);
}

body, .nav-link {
    font-family: 'Open Sans', sans-serif;
}

.hljs {
    font-family: "Inconsolata", "Monaco", "Andale Mono", "Lucida Console", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
    overflow-x: auto;
    position: relative;
    background-color: #f9f9f9;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
    padding: 1em 1em 1em 1em;
    margin-bottom: 1em;
}

.CodeMirror {
    background-color: #f9f9f9;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
}

code {
    color: #795da3;
}

.bd-masthead {
    color: white;
    background-image: none !important;
    background-color:  #4fc08d;
}

.bd-masthead .lead {
    color: white;
}

blockquote {
    font-size: 1.25rem;
    font-weight: 300;
}

.bd-content>h1, .bd-content>h2, .bd-content>h3, .bd-content>h4, .bd-content>h5 {
    padding-top: 25px;
    padding-bottom: 15px;
}

#__nuxt > .progress {
    z-index: 100 !important;
}

.vue-example {
    margin: 20px;
}

pre.editable:after {
    content: '(double click to edit)';
    position: absolute;
    top: 0;
    right: 0;
    color: #aaa;
    text-align: right;
    font-size: .75em;
    padding: 5px 10px 0;
    line-height: 15px;
    height: 15px;
    font-weight: 600;
}

pre.editable:hover:after {
    font-size: .9em;
    color: #444;
    cursor: pointer;
}

pre.editable.live:after {
    content: 'Live';
}
